<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .base1 {
            color: red;
        }

        .base2 {
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
        v-bind 绑定class属性 实现动态操作
        对象方式
          {
            class名: boolean     true 生效    false  不生效
          }
        数组形式
          [变量]   渲染时 会到data中找变量的值 作为样式名字进行渲染
          [b1]    data => b1 => base1  => 渲染 class = 'base1'

-->
<div id="app">
<!--    class = 'base1 base2'-->
    <p v-bind:class="{base1:isActiveBase1,base2:isActiveBase2}"> vue 实现class属性的动态操作</p>
    <p :class="baseObject"> vue 实现class属性的动态操作2</p>
    <p :class="[b1,b2]"> vue 实现class属性的动态操作2</p>
    <button @click="changcolor">改变文字颜色</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isActiveBase1: true,
            isActiveBase2: true,
            baseObject:{
                base1:true,
                base2:false
            },
            b1:'base1',
            b2:'base2'
        },
        methods: {
            changcolor() {
                this.isActiveBase1 = !this.isActiveBase1
            }
        }
    })
</script>
</body>
</html>